<template>
  <view>
    <view class="text-right text-white flex" style="position: fixed;left: 0;top: 0;">

      <view class="padding">
        <text class="cuIcon-title" :class="connectState?'text-green':'text-red'"></text>
        {{ connectState ? '已连接' : '未连接' }}
      </view>
    </view>

    <view class="text-right text-white flex" style="position: fixed;right: 0;top: 0;">
      <view class="padding" @click="modalName='setting'"
            @tap="selectKeyboard">
        <text class="cuIcon-keyboard"></text>
        {{ keyboardType === '21' ? '切换7键' : '切换21键' }}
      </view>
      <view class="padding" @click="modalName='setting'">
        <text class="cuIcon-settings"></text>
        设置
      </view>
    </view>


    <view class="cu-modal" :class="modalName==='setting'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">参数设置</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">
          <form>
            <view class="cu-form-group margin-top">
              <view class="title">IP地址</view>
              <input v-model="setting.ip" placeholder="IP地址" name="input"></input>
            </view>
            <view class="cu-form-group">
              <view class="title">端口</view>
              <input v-model="setting.port" placeholder="端口" name="input" type="number"></input>
            </view>
            <view class="uni-title">低</view>
            <view>
              <slider @change="sliderChange" data-type="low" :value="setting.lowDistance" show-value/>
            </view>
            <view class="uni-title">中</view>
            <view>
              <slider @change="sliderChange" data-type="mid" :value="setting.midDistance" show-value/>
            </view>
            <view class="uni-title">高</view>
            <view>
              <slider @change="sliderChange" data-type="high" :value="setting.highDistance" show-value/>
            </view>
          </form>
        </view>
        <view class="cu-bar bg-white">
          <view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
          <view class="action margin-0 flex-sub  solid-left" @tap="confirmSaveSetting">确定</view>
        </view>
      </view>
    </view>

    <div class="container" id="piano" style="height: auto !important;">
      <!-- 表头 -->
      <div class="component-random-lyric">
        <div id="randomLyric" class="lyric">"把青春写成歌"</div>
      </div>

      <seven-keyboard @connect="onconnect" ref="sevenKeyboard" v-if="keyboardType=='7'"></seven-keyboard>
      <twenty-keyboard @connect="onconnect" ref="twentyKeyboard" v-if="keyboardType=='21'"></twenty-keyboard>
      <!-- 演示界面 -->
      <div class="socre-section-container">
        <!-- 歌谱歌词界面 -->
        <div class="Music-score">
          <!--选择歌曲-->
          <div v-show="showSongsSelect" class="view">
            <div class="lyric-section">
              <h2 class="section-title">选择歌曲</h2>
              <view v-for="(item,index) in songs" :key="index" class="song-item">
                <div @tap="selectSong(index)" class="flex justify-between ">
                  <text class="text-left">
                    {{ index + 1 + "." + item.title }}
                  </text>
                  <text class="text-right margin-right-xl">
                    {{ item.author }}
                  </text>
                </div>
              </view>

            </div>
          </div>
          <!--展示歌曲-->
          <div v-show="!showSongsSelect" class="view">
            <view @click="showSongsSelect=true" class="shadow-lg padding"
                  style="position: absolute;left: 0;z-index: 10;">
              <text class="cuIcon-back"></text>
              选择歌曲
            </view>
            <!-- 头 -->
            <div class="component-title">
              <h1 class="title">{{ song.title }}</h1>
            </div>
            <!-- 歌谱 -->
            <div class="sheet-section">
              <div class="section-title">
                <h2 class="title">歌谱</h2>
              </div>
              <div class="section-content">
                {{ song.music }}
              </div>
            </div>
            <!-- 歌词 -->
            <div class="lyric-section">
              <h2 class="section-title">歌词</h2>
              <div class="section-content">
                {{ song.lyrics }}
              </div>
            </div>
          </div>

        </div>
        <!-- 数据展示 -->
        <div class="data-display">
          <div class="view">
            <!-- 标题 -->
            <div class="component-title">
              <h1 class="title">数据展示</h1>
            </div>
            <div class="data" id="console">
            </div>
          </div>
        </div>
      </div>
    </div>

  </view>
</template>

<script>
import SevenKeyboard from "@/component/seven-keyboard/SevenKeyboard";
import TwentyKeyboard from "@/component/twenty-keyboard/TwentyKeyboard";
import {mixin} from "@/mixin";

export default {
  components: {SevenKeyboard, TwentyKeyboard},
  data() {
    return {
      connectState: false,
      modalName: "none",
      keyboardType: "21",
      showSongsSelect: false,
      setting: {
        ip: '192.168.1.1',
        port: 3305,
        highDistance: 40,
        midDistance: 40,
        lowDistance: 40,
      },
      songs: [
        {
          author: "王其岩",
          title: "两只老虎",
          lyrics: '两只老虎，两只老虎，跑得快，跑得快，一只没有眼睛，一只没有耳朵，真奇怪，真奇怪',
          music: `  1 2 3 1 | 1 2 3 1 | 3 4 5 - | 3 4 5 - | 5 6 5 4 | 5 6 5 4 3 1 | 5 6 5 4 3 1 | 1 5 1 - | 1 5
                1 -
                |`
        },
        {
          author: "王其岩",
          title: "三只老虎",
          lyrics: '三只老虎，三只老虎，跑得快，跑得快，一只没有眼睛，一只没有耳朵，一只没有屁股，真奇怪，真奇怪',
          music: `  1 2 3 1 | 1 2 3 1 | 3 4 5 - | 3 4 5 - | 5 6 5 4 | 5 6 5 4 3 1 | 5 6 5 4 3 1 | 1 5 1 - | 1 5
                1 -
                |`
        }
      ],
      song: {},
      websocket: null
    }
  },
  mixins: [mixin], //混入文件
  onLoad() {
    let keyMap = {
      '1': 1,
      '2': 2,
      '3': 3,
      '4': 4,
      '5': 5,
      '6': 6,
      '7': 7,
      '8': 8,
      '9': 9,
      'q': 10,
      'w': 11,
      'e': 12,
      'r': 13,
      't': 14,
      'y': 15,
      'u': 16,
      'i': 17,
      'o': 18,
      'p': 19,
      'a': 20,
      's': 21,
      'd': 22,
      'f': 23,
      'g': 24,
      'h': 25,
      'j': 26,
      'k': 27,
      'l': 28,
      'z': 29,
      'x': 30,
      'c': 31,
      'v': 32,
      'b': 33,
      'n': 34,
      'm': 35,
    }
    this.song = this.songs[0]
    var that = this;
    document.addEventListener("keydown", keydown);

    function keydown(event) {          // 传递传递参数event
      console.log(event.keyCode)
      //1-9

      var charStr = String.fromCharCode(event.keyCode).toLocaleLowerCase()
      console.log(charStr)
      let value = keyMap[charStr]
      if (value <= 21) {
        that.pressKey(value)
        setTimeout(() => {
          that.unpressKey(value)
        }, 500)
      }

      //

    }

  },
  onReady() {
    this.setting = this.getSetting()
    this.connect()
  },
  methods: {
    selectSong(index) {
      this.song = this.songs[index]
      this.showSongsSelect = false;
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal(e) {
      this.modalName = null
    },
    confirmSaveSetting() {
      this.websocket.send({
        low: Number(this.setting.lowDistance),
        mid: Number(this.setting.midDistance),
        high: Number(this.setting.highDistance),
      })
      uni.showToast({
        title: "保存成功"
      })
      this.hideModal()
    },
    getSetting() {
      return this.$store.state.setting
    },
    connect() {
      var that = this;
      let currentRef = this.$refs.sevenKeyboard;
      if (this.keyboardType == 21) {
        currentRef = this.$refs.twentyKeyboard;
      }
      if (!this.websocket) {
        console.log("首次连接")
        let setting = this.getSetting()
        this.websocket = new WebSocket(`ws://${setting.ip}:${setting.port}`)
        this.websocket.onopen = function () {
          //触发连接事件
          console.log('链接状态' + that.websocket.readyState)
          that.onconnect(that.websocket.readyState)
        }
      }
      //收到消息
      this.websocket.onmessage = function (evt) {
        var received_msg = evt.data
        currentRef.onmessage(received_msg)
      }
    },

    onconnect(state) {
      this.connectState = state
      this.$store.state.connectState = state
    },
    selectKeyboard() {
      this.keyboardType == '21' ? this.keyboardType = '7' : this.keyboardType = '21'
      this.connect()
    },
    sliderChange(e) {
      let value = e.detail.value
      console.log('value 发生变化：' + e.detail.value)
      let type = e.target.dataset.type
      if (type == 'low') {
        this.setting.lowDistance = Number(value)
      }
      if (type == 'mid') {
        this.setting.midDistance = Number(value)
      }
      if (type == 'high') {
        this.setting.highDistance = Number(value)
      }


    }
  }
}
</script>

<style scoped>
@import "piano.css";
</style>